<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>zui</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="https://cdn.bootcss.com/zui/1.7.0/css/zui.min.css" rel="stylesheet">
    <style>
        .show-grid>div {
            border: 1px solid #ccc;
            padding:10px;
            background: #f1f1f1;
        }
    </style>
</head>

<body>
    <div class="container bs-docs-container">

        <div class="row">
            <div class="col-md-12" role="main">
                <div class="bs-docs-section">
                    <h1 id="grid" class="page-header">栅格系统</h1>
                    <h2 id="grid-example-basic">实例：从堆叠到水平排列</h2>
                    <div class="bs-docs-grid">
                        <div class="row show-grid">
                            <div class="col-md-1">.col-md-1</div>
                            <div class="col-md-1">.col-md-1</div>
                            <div class="col-md-1">.col-md-1</div>
                            <div class="col-md-1">.col-md-1</div>
                            <div class="col-md-1">.col-md-1</div>
                            <div class="col-md-1">.col-md-1</div>
                            <div class="col-md-1">.col-md-1</div>
                            <div class="col-md-1">.col-md-1</div>
                            <div class="col-md-1">.col-md-1</div>
                            <div class="col-md-1">.col-md-1</div>
                            <div class="col-md-1">.col-md-1</div>
                            <div class="col-md-1">.col-md-1</div>
                        </div>
                        <div class="row show-grid">
                            <div class="col-md-8">.col-md-8</div>
                            <div class="col-md-4">.col-md-4</div>
                        </div>
                        <div class="row show-grid">
                            <div class="col-md-4">.col-md-4</div>
                            <div class="col-md-4">.col-md-4</div>
                            <div class="col-md-4">.col-md-4</div>
                        </div>
                        <div class="row show-grid">
                            <div class="col-md-6">.col-md-6</div>
                            <div class="col-md-6">.col-md-6</div>
                        </div>
                    </div>

                    <h2 id="grid-example-mixed">实例：移动设备和桌面屏幕</h2>
                    <div class="bs-docs-grid">
                        <div class="row show-grid">
                            <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
                            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
                        </div>
                        <div class="row show-grid">
                            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
                            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
                            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
                        </div>
                        <div class="row show-grid">
                            <div class="col-xs-6">.col-xs-6</div>
                            <div class="col-xs-6">.col-xs-6</div>
                        </div>
                    </div>
                    <h2 id="grid-example-mixed-complete">实例：手机、平板、桌面</h2>
                    <div class="bs-docs-grid">
                        <div class="row show-grid">
                            <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
                            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
                        </div>
                        <div class="row show-grid">
                            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
                            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
                            <!-- Optional: clear the XS cols if their content doesn't match in height -->
                            <div class="clearfix visible-xs-block"></div>
                            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
                        </div>
                    </div>
                    <h2 id="grid-example-wrapping">实例：多余的列（column）将另起一行排列</h2>
                    <div class="bs-docs-grid">
                        <div class="row show-grid">
                            <div class="col-xs-9">.col-xs-9</div>
                            <div class="col-xs-4">.col-xs-4
                                <br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous
                                unit.
                            </div>
                            <div class="col-xs-6">.col-xs-6
                                <br>Subsequent columns continue along the new line.</div>
                        </div>
                    </div>
                    <h2 id="grid-responsive-resets">响应式列重置</h2>
                    <div class="bs-docs-grid">
                        <div class="row show-grid">
                            <div class="col-xs-6 col-sm-3">
                                .col-xs-6 .col-sm-3
                                <br> Resize your viewport or check it out on your phone for an example.
                            </div>
                            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

                            <!-- Add the extra clearfix for only the required viewport -->
                            <div class="clearfix visible-xs-block"></div>

                            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
                            <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
                        </div>
                    </div>
       
                    <h2 id="grid-offsetting">列偏移</h2>
                    <div class="bs-docs-grid">
                        <div class="row show-grid">
                            <div class="col-md-4">.col-md-4</div>
                            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
                        </div>
                        <div class="row show-grid">
                            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
                        </div>
                        <div class="row show-grid">
                            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
                        </div>
                    </div>
                    <h2 id="grid-nesting">嵌套列</h2>
                    <div class="row show-grid">
                        <div class="col-sm-9">
                            Level 1: .col-sm-9
                            <div class="row show-grid">
                                <div class="col-xs-8 col-sm-6">
                                    Level 2: .col-xs-8 .col-sm-6
                                </div>
                                <div class="col-xs-4 col-sm-6">
                                    Level 2: .col-xs-4 .col-sm-6
                                </div>
                            </div>
                        </div>
                    </div>
                    <h2 id="grid-column-ordering">列排序</h2>
                    <div class="row show-grid">
                        <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
                        <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zui/1.7.0/js/zui.min.js"></script>
</body>

</html>